<template>

	<div class="HomeSwpier">

		<swiper :options="swiperOption">
			<!-- slides -->
			<swiper-slide>
				<img src="http://img1.qunarzz.com/piao/fusion/1809/31/da037478f37cf202.jpg_750x200_a02cf862.jpg" /></swiper-slide>
			<swiper-slide>
				<img src="http://img1.qunarzz.com/piao/fusion/1809/c6/2467595fffc3b302.jpg_750x200_cca13d51.jpg" /></swiper-slide>
			<swiper-slide>
				<img src="http://img1.qunarzz.com/piao/fusion/1809/ff/1bf7d3a4f6591002.jpg_750x200_40809f2a.jpg" /></swiper-slide>
			<swiper-slide>
				<img src="http://img1.qunarzz.com/piao/fusion/1803/eb/f3d2fa5308fd5f02.jpg_750x200_38b8d6f7.jpg" />
			</swiper-slide>
			<swiper-slide>
				<img src="http://img1.qunarzz.com/piao/fusion/1706/b8/a8e8ff02b094c802.jpg_750x200_ddaec8e5.jpg" /></swiper-slide>
			<swiper-slide>
				<img src="http://img1.qunarzz.com/piao/fusion/1706/b9/6b91b49794f46402.jpg_750x200_d7f254e2.jpg" />
			</swiper-slide>
			<swiper-slide>
				<img src="http://img1.qunarzz.com/piao/fusion/1809/82/c94c9a77de17f902.jpg_750x200_a8419488.jpg" />
			</swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination"></div>
			<!--<div class="swiper-button-prev" slot="button-prev"></div>
			<div class="swiper-button-next" slot="button-next"></div>
			<div class="swiper-scrollbar" slot="scrollbar"></div>-->
		</swiper>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				swiperOption: {
					pagination: {
						el: '.swiper-pagination'
					},
					loop: true,
				    autoplay: true
				},
				
			}
		}
	}
</script>

<style>
	.HomeSwpier {
		width: 100%;
		height: 1rem;
	}
	
	.HomeSwpier img {
		width: 100%;
		height: 100%;
	}
	
	.swiper>>>.swiper-pagination-bullet-active {
		background: #FFFFFF;
	}
</style>